<template>
    <section>
        <DetailsHeader title="代金券" class="mb-24" />
        <div class="page-content">
            <div class="search-content">
                <div class="flex">
                    <a-dropdown :trigger="['click']" class="mr-8">
                        <template #overlay>
                            <a-menu @click="onCreatInstance">
                                <a-menu-item key="communityCloud">
                                    <a-button type="link">社区云</a-button>
                                </a-menu-item>
                                <a-menu-item key="highlyAvailableCloud">
                                    <a-button type="link">高可用云</a-button>
                                </a-menu-item>
                            </a-menu>
                        </template>
                        <a-button type="primary" style="display: flex;align-items: center;">
                            <template #icon>
                                <svg-icon name="icon_add" style="width:16px;height:16px;margin-right: 6px;" />
                            </template>
                            去使用
                        </a-button>
                    </a-dropdown>
                    <a-button type="primary" class="mr-8" @click="modalVisible = true">兑换券</a-button>
                </div>
                <div>
                    <a-select ref="select" v-model:value="queryParams.status" placeholder="所有代金券" allowClear class="mr-8"
                        @change="getList">
                        <a-select-option value="1">待使用</a-select-option>
                        <a-select-option value="2">已过期</a-select-option>
                        <a-select-option value="3">已使用</a-select-option>
                    </a-select>
                </div>
            </div>

            <a-table :dataSource="tableList">
                <a-table-column key="createdAt" title="获得时间" data-index="createdAt" />
                <a-table-column key="name" title="代金券名称" data-index="name" />
                <a-table-column key="phone" title="有效期" data-index="phone">
                    <template #default="{ record }">
                        {{ record.availStartTime }} ~ {{ record.availEndTime }}
                    </template>
                </a-table-column>
                <a-table-column key="status" title="状态" data-index="status">
                    <template #default="{ record }">
                        {{ selectDictLabel(statusEnum, record.status) }}
                    </template>
                </a-table-column>
                <a-table-column key="phone" title="余额/原始面额（元）" data-index="phone">
                    <template #default="{ record }">
                        {{ record.availAmount }} / {{ record.amount }}
                    </template>
                </a-table-column>
            </a-table>
        </div>

        <!-- 兑换券 -->
        <a-modal v-model:visible="modalVisible" title="兑换券" @ok="handleOk">
            <a-form class="query-list-form" :model="form" ref="formRef">
                <a-form-item name="ticketId" label="输入兑换码" :rules="[{ required: true, message: '请输入输入兑换码!' }]">
                    <a-input v-model:value="form.ticketId" allowClear autocomplete="off" placeholder="请输入输入兑换码"></a-input>
                </a-form-item>
            </a-form>
        </a-modal>

    </section>
</template>

<script setup name="Voucher">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getUserTicketListApi, redeemTicket } from 'api/modules/api.cost'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { selectDictLabel } from '@/libs/util.common'
import { XsyMessage } from '@/libs/util.toast'

const router = useRouter()

const statusEnum = [
    {
        label: '待使用',
        value: '1'
    },
    {
        label: '已过期',
        value: '2'
    },
    {
        label: '已使用',
        value: '3',
    }
]

// 获取列表
const queryParams = ref({})
const tableList = ref([])
const getList = () => {
    getUserTicketListApi(queryParams.value).then(res => {
        res.code == 0 && (tableList.value = res.data.list || [])
    })
};

getList()

// 兑换券
const form = ref({})
const modalVisible = ref(false)
const handleOk = () => {
    redeemTicket(form.value).then(res => {
        if (res.code == 0) {
            XsyMessage.success('兑换成功')
            modalVisible.value = false
            form.value.ticketId = undefined
        }
    })
}

const onCreatInstance = e => {
    router.push('/' + e.key)
};

</script>

<style scoped lang="scss">
.page-content {
    background: #fff;
    padding: 24px;

    .search-content {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
    }
}
</style>
